// new Enlarge('#box')
userCenter()
hotkeyfn()
footerfun()



const goodsId = window.sessionStorage.getItem('goodsId')
// console.log(goodsId);
!goodsId ? window.location.href = '../index2.html' : picdetailBoxFun()


const subHeadBox = document.querySelector('.subHead')
const picdetailBox = document.querySelector('.picdetailBox')
picdetailBoxFun()
async function picdetailBoxFun() {
    // 1. 请求数据
    const res = await pAjax({
        url: 'https://www.lemall.com/api/product/detail.html',
        data: {
            productId: goodsId
        },
        dataType: 'json'
    })

    // 2. 渲染页面

    if(res.data.productCate){
        var str1 = ''

    
        str1 += `
        <strong>${res.data.productCatePP.name}</strong>
                    <span>
                        &nbsp;>&nbsp;
                        <a href="">${res.data.productCateP.name}</a>&nbsp;>&nbsp;
                        <a href="">${res.data.productCate.name}</a>&nbsp;>&nbsp;
                    </span>
                    <span>
                        <a href="">${res.data.productBrand.name}</a>&nbsp;>&nbsp;
                        ${res.data.product.name1}
                    </span>
        
        `
        subHeadBox.innerHTML = str1
    }else{
        subHeadBox.style.display = 'none'
    }
    


    var str = ''
        str += `   
        <div id="box" class="picBox">
        <div class="bigPic">
            <img src="${res.data.productLeadPicList[0]} "
                alt="">
            <div class="mask"></div>
        </div>
        <div class="smallPic">
            <a href="" class="prev"></a>
            <a href="" class="next"></a>
            <div class="smallPic-list">         
                <img src="${res.data.productLeadPicList[0]}"
                data-show="${res.data.productLeadPicList[0]}" data-enlarge="${res.data.productLeadPicList[0]}"   alt="" class="active">
                <img src="${res.data.productLeadPicList[1]}"
                data-show="${res.data.productLeadPicList[1]}" data-enlarge="${res.data.productLeadPicList[1]}"   alt="">
                <img src="${res.data.productLeadPicList[2]}"
                data-show="${res.data.productLeadPicList[2]}" data-enlarge="${res.data.productLeadPicList[2]}"   alt="">
                <img src="${res.data.productLeadPicList[3]}"
                data-show="${res.data.productLeadPicList[3]}" data-enlarge="${res.data.productLeadPicList[3]}"   alt="">
                <img src="${res.data.productLeadPicList[4]}"
                data-show="${res.data.productLeadPicList[4]}" data-enlarge="${res.data.productLeadPicList[4]}"   alt=""">
   
            </div>
   
   
            </div>
            <div class="enlarge">
                <img src="${res.data.productLeadPicList[0]}"
                    alt="">
            </div>
        </div>
        <div class="itemInfo">
            <div class="detailName">
                <h1>${res.data.product.name1}</h1>
                <div class="detailName-n">【${res.data.product.name2}</div>
            </div>
            <div>
                <div class="summary">
                    <div class="priceBox">
                        <div class="commentCount">
                            <p>累计评价</p>
                            <a href="">${res.data.product.commentsNumber}</a>
                        </div>
                        <div class="summaryPrice">
                            <em style="font-style: normal;">商 城 价</em>
                            <strong>¥ ${res.data.product.malMobilePrice}</strong>
                        </div>
                        <div class="oldPrice">
                            <em style="font-style: normal;"> 市 场 价 </em>
                            <del>¥ ${res.data.product.marketPrice}</del>
                        </div>
                    </div>
                    <div style="padding: 0px 0px 10px 10px;">
                        <div class="summary-service">
                            <span class="dt"> 服&emsp;&emsp;务 :</span>
                            <span class="dd">
                                由 乐视商城官方旗舰店 发货并提供售后服务
                            </span>
                        </div>
                        <div class="delivery">
                            <div>配送至:</div>
                            <div class="select">请选择
                                <i></i>
                            </div>
                            <div class="fahuo">付款成功后, 预计 <i>48小时</i> 内发货</div>
                        </div>
                    </div>
                </div>
                <div class="choose">
                    <div class="chostext">购买数量 : </div>
                    <div class="chooseBtn">
                        <input class="chooseBox" value="${res.data.product.buyType}">
                        
                           <input type="text" class="cut" placeholder="+">
                            <a href="" class="add">-</a>
                        </input>
                        
                    </div>
                    <span>(库存 <i style="font-style: normal;">${res.data.product.productStock}</i> 件)</span>
                </div>
                <div class="allbtn">
                    <button class="buynow">立即购买</button>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <button class="addcar" data-id="${res.data.product.id}">加入购物车</button>
                    &nbsp;&nbsp;&nbsp;&nbsp;
   
                    <button class="collection">收藏</button>
                </div>
            </div>
        </div>
    </div>
        
        
        `

        picdetailBox.innerHTML = str
    
   
new Enlarge('#box')

   
const allbtnBox = document.querySelector('.allbtn')
allbtnBox.addEventListener('click',e =>{
    if (e.target.nodeName === 'BUTTON'){
      const goodsId = e.target.dataset.id   
     window.localStorage.setItem('goodsId',goodsId)
      addCart(goodsId) 
    }
  })


  
  async function addCart(goodsId) {
    // 1. 拿到 localStroage 内的 id 和 token
    const id = window.localStorage.getItem('id')
    const token = window.localStorage.getItem('token')
//   console.log(id);
    // 2. 验证 id 是否存在
    if (!id) {
      const res = window.confirm('您还没有登录, 请登录后在购买, 点击确定跳转回登录页, 点击取消留在当前页面')
      if (res) {
        window.location.href = '../views/login.html'
        return
      }
      return
    }
  
    const res = await pAjax({
      url: 'http://localhost:8888/cart/add',
      method: 'POST',
      data: { id, goodsId },
      headers: { authorization: token },
      dataType: 'json'
    })
//   console.log(res);
    if (res.code === 401) {
      const res = window.confirm('您的登录已经过期, 请重新登录后在购买, 点击确定跳转回登录页, 点击取消留在当前页面')
      if (res) {
        window.location.href = './login.html'
        return
      }
      return
    }
  
    if (res.code === 1) {
      alert('加入购物车成功')
    }
  }

}
